<template>
  <el-container>
    <el-header>
      <el-form :inline="true" style="margin-top: 20px">
        <el-form-item label="关键字">
          <el-input v-model="keyword" placeholder="关键字" clearable @clear="clearConditions"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" v-on:click="searchData"></el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table height="100%" :data="dataTable.result" border style="width: 100%;" highlight-current-row @row-dblclick="rowDbClick">
        <el-table-column prop="name" label="名称" width="150"></el-table-column>
        <el-table-column prop="maxImportFileSize" label="导入文件大小(KB)" header-align="center" align="right" width="150"></el-table-column>
        <el-table-column label="预览导入" header-align="center" align="center" width="80">
          <template slot-scope="scope">
            <template v-if="scope.row.preImport">
              <i class="el-icon-success" style="color:green;font-size:24px"></i>
            </template>
            <template v-else>
              <i class="el-icon-error" style="color:red;font-size:24px"></i>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="template" label="导入模板" width="150"></el-table-column>
        <el-table-column prop="dataWriter" label="数据写入器" header-align="left" align="left" min-width="200" ></el-table-column>
        <el-table-column prop="createTime" label="创建时间" header-align="center" align="center" width="200" ></el-table-column>
        <el-table-column prop="updateTime" label="修改时间" header-align="center" align="center" width="200" ></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="100">
          <template slot="header">
            <el-button type="text" icon="el-icon-plus" @click="add"></el-button>
            <el-button type="text" icon="el-icon-refresh" @click="query" title="刷新"></el-button>
          </template>
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-remove" @click="remove(scope.row)" title="删除"></el-button>
            <el-button type="text" icon="el-icon-edit" @click="item(scope.row)" title="编辑"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="新建导入设置" :visible.sync="showCreate" width="400px">
        <div class="container-fluid">
          <el-input v-model="newName" placeholder="请填写新导入名称" autocomplete="off"></el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showCreate = false">取 消</el-button>
          <el-button type="primary" @click="create">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
    <!--底部分页-->
    <el-footer>
      <el-pagination v-on:current-change="query" :current-page.sync="queryObject.pageIndex" :page-size="queryObject.pageSize" layout="total, prev, pager, next" :total="dataTable.rowCount">
      </el-pagination>
    </el-footer>
  </el-container>
</template>
<script>
import { mapState, mapActions } from 'vuex';
const STORE_MODULE = {
    "getters": [
    ],
    "name": "excelImporter",
    "state": [
      "queryObject",
      "dataTable"
    ],
    "actions": [
        "query",
        "delete"
    ]
};
export default {
  data() {
    return {
      newName: "",
      showCreate: false,
      currentItem: {},
      keyword: null
    };
  },
  watch: {
  },
  computed: {
    ...mapState(STORE_MODULE.name, STORE_MODULE.state)
  },
  created() {
    this.query();
  },
  methods: {
    ...mapActions(STORE_MODULE.name, STORE_MODULE.actions),
    searchData() {
      this.queryObject.parameters.keyword = this.keyword;
      this.query();
    },
    clearConditions() {
      if (this.queryObject.parameters.keyword != this.keyword) this.searchData();
    },
    rowDbClick(row, column, event) {
      this.item(row);
    },
    item(row){
      this.$router.push({
        name: "excelImporterItem",
        params: { name: row.name }
      });
    },
    remove(row) {
      confirm(
        "确认要删除" + row.name + "吗？删除之后将不可恢复，请谨慎操作！",
        "警告",
        "warning",
        () => {
          this.delete(row.name).then(r => {
            if (r.success) alert("删除成功", "消息", "success");
          }).catch(error => {
            alert(error, "错误", "error");
          });
        }
      );
    },
    add() {
      this.showCreate = true;
    },
    create(){
      if (this.newName){
        this.showCreate = false;
        this.$router.push({
          name: "excelImporterItem",
          params: { name: this.newName },
        });
        this.newName = null;
      }
      else{
        alert('请先填写名称','提示','info');
      }
    }
  }
};
</script>
